<!-- punchClock.html -->
<!DOCTYPE html>
<html>
<head>
	<title>打卡</title>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		p{
			margin: 0;
			word-wrap: break-word;
		}
		.title-p{
			font-size: 20px;
			font-weight: 500;
			color: #262626;
			white-space : nowrap;
			overflow: hidden;
		}
		.content-p{
			font-size: 14px;
			color: #262626;
			white-space : nowrap;
			overflow: hidden;
			font-weight: 300;
		}
		.sub-title-p{
			font-size: 12px;
			color: #878787;
			white-space : nowrap;
			overflow: hidden;
			font-weight: 300;
		}
		.content-div{
			background-image: url(../../image/lanxuejihua_01.png);
			width: 100%;
			min-height: 100%;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.top-div{
			padding: 20px;
			overflow: hidden;
			position: relative;
		}
		.top-div .top-left-div{
			float: left;
			position: relative;
		}
		.top-div .top-right-div{
			float: right;
			width: calc(100% - 150px);
			overflow: hidden;
			position: relative;
			height: 210px;
		}
		.top-left-img{
			display: block;
			width: 150px;
		}
		.top-right-img{
			float: right;
			width: 80px;
			margin-right: 10px;
		}
		.top-right-bottom-div{
			padding: 0 6px 0 20px;
			position: absolute;
			left: 0;
			bottom: 10px;
			width: calc(100% - 26px);
		}
		.top-right-p{
			padding: 4px 14px;
			color: #ac1922;
			border: 1px solid #ac1922;
			border-radius: 2px;
			font-size: 14px;
			text-align: center;
		}
		.center-div{
			padding: 20px;
			position: relative;
		}
		.center-content-div{
			background-color: white;
			border-radius: 5px;
			padding: 10px;
			position: relative;
			overflow: hidden;
			box-shadow: 2px 2px 2px #888;
		}
		.center-top-left-div{
			padding: 0 5px;
			float: left;
			height: 50px;
		}
		.user-icon{
			width: 50px;
			height: 50px;
			border-radius: 25px;
		}
		.center-top-right-div{
			float: right;
			width: calc(100% - 80px);
			padding: 0px 10px;
			height: 50px;
		}
		.center-top-div{
			overflow: hidden;
		}
		.center-line-div{
			position: relative;
			height: 10px;
		}
		.line-div{
			content: '';
	       	position: absolute;
	       	width: 200%;
	       	height: 200%;
	       	border-bottom: 1px dashed #a9a9a9;
			-webkit-transform-origin: 0 0;
			-moz-transform-origin: 0 0;
			-ms-transform-origin: 0 0;
			-o-transform-origin: 0 0;
			transform-origin: 0 0;
			-webkit-transform: scale(0.5, 0.5);
			-ms-transform: scale(0.5, 0.5);
			-o-transform: scale(0.5, 0.5);
			transform: scale(0.5, 0.5);
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.center-bottom-div{
			position: relative;
			overflow: hidden;
			padding: 10px;
		}
		.center-bottom-content-div{
			position: relative;
			overflow: hidden;
		}
		.content-sub-div{
			width: 33%;
			float: left;
			text-align: center;
		}
		.num-class{
			font-size: 22px;
			color: #ac1922;
			font-family:"Times New Roman", Times, serif;
		}
		.bottom-div{
			padding: 20px;
			position: relative;
			padding-top: 0;
		}
		.bottom-content-div{
			padding: 10px;
			position: relative;
			overflow: hidden;
			background-color: white;
			border-radius: 5px;
			box-shadow: 2px 2px 2px #888;
		}
		.bottom-content-left-div{
			width: calc(100% - 120px);
			height: 120px;
			float: left;
		}
		.bottom-content-right-div{
			float: right;
			padding: 10px;
		}
		.code-img{
			width: 100px;
			display: block;
		}
		.bottom-content-left-sub-div{
			padding: 10px 0 0 6px;
		}
		.bottom-sub-title-div{
			background-color: #ac1922;
			height: 22px;
			border-radius: 10px;
			margin-top: 8px;
			position: relative;
			max-width: 175px;
		}
		.bottom-sub-left-div{
			width: calc(100% - 28px);
			float: left;
		}
		.bottom-sub-right-div{
			padding: 3px;
			float: right;
		}
		.arrow-icon{
			width: 16px;
			height: 16px;
			display: block;
		}
		.sub-content-title{
			padding-left: 10px;
		}
		.sub-content-title-p{
			color: white;
			font-size: 10px;
			line-height: 22px;
			font-weight: 300;
		}
		.chang-feng-wang{
			padding-top: 20px;
			padding-bottom: 10px;
			text-align: center;
			color: white;
			font-size: 20px;
			line-height: 20px;
			letter-spacing: 6px;
			font-weight: 300;
		}
	</style>
</head>
<body>
	<div id="share_img_div" class="content-div">
		<div class="top-div">
			<div class="top-left-div">
				<img class="top-left-img" src="../../image/lanxue_txt.png">
			</div>
			<div class="top-right-div">
				<img class="top-right-img" src="../../image/lanxue.png">
				<div id="course_info" class="top-right-bottom-div" hidden="hidden">
					<p id="courseName" class="top-right-p">
						<span id="current_time">2019.10.10</span>
						<br>
						<span id="course_name">货代英语专业术语</span>
					</p>
				</div>
			</div>
		</div>
		<div class="center-div">
			<div class="center-content-div">
				<div class="center-top-div">
					<div class="center-top-left-div">
						<img id="usericon" class="user-icon" src="../../image/default_user_icon.png">
					</div>
					<div class="center-top-right-div">
						<p class="content-p" style="margin-top: 6px;">
							我正在打卡学习
						</p>
						<p class="sub-title-p" style="margin-top: 4px;">
							感谢监督
						</p>
					</div>
				</div>
				<div class="center-line-div">
					<div class="line-div"></div>
				</div>
				<div class="center-bottom-div">
					<div class="center-bottom-content-div">
						<div class="content-sub-div">
							<p class="content-p">
								坚持完成打卡
							</p>
							<p class="sub-title-p" style="margin-top: 4px;">
								<span id="count_num" class="num-class">
									0
								</span>
								<span style="color: #262626;">
									次
								</span>
							</p>
						</div>
						<div class="content-sub-div">
							<p class="content-p">
								打卡目标
							</p>
							<p class="sub-title-p" style="margin-top: 4px;">
								<span class="num-class">
									56
								</span>
								<span style="color: #262626;">
									次
								</span>
							</p>
						</div>
						<div class="content-sub-div">
							<p class="content-p">
								行动力打败
							</p>
							<p class="sub-title-p" style="margin-top: 4px;">
								<span id="percentage_num" class="num-class">
									0%
								</span>
								<span style="color: #262626;">
									的同学
								</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-div">
			<div class="bottom-content-div">
				<div class="bottom-content-left-div">
					<div class="bottom-content-left-sub-div">
						<p class="title-p">
							蓝血计划
						</p>
						<p class="content-p">
							升级认知系统 训练管理才能
						</p>
						<p class="content-p">
							搭建人脉平台 开启职业生涯
						</p>
						<div class="bottom-sub-title-div">
							<div class="bottom-sub-left-div">
								<div class="sub-content-title">
									<p class="sub-content-title-p">
										识别二维码加入蓝血计划
									</p>
								</div>
							</div>
							<div class="bottom-sub-right-div">
								<img class="arrow-icon" src="../../image/icon_arrow_02.png">
							</div>
						</div>
					</div>
				</div>
				<div class="bottom-content-right-div">
					<img class="code-img" src="../../image/img_code.png">
				</div>
			</div>
		</div>
		<div class="chang-feng-wang">
			长风网出品
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/html2canvas.js"></script>
<script type="text/javascript" src="../../script/timeStampTool.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript">
	var screenCapturePath = '';//默认没有截好的图片
	apiready = function(){
		setupNotifi();
	    setupBGImage();
	    prepareData();
	    setupCurrentData();
	    setupUserHead();
	}
	//设置用户头像
	function setupUserHead(){
		if ($api.getStorage('cfnetppusericon') != '' && $api.getStorage('cfnetppusericon') != null) {
			$('#usericon').attr('src', HeadPortraitIsNull($api.getStorage('cfnetppusericon')));
		}else{
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid')
			};
			cfnetppPOST(urlApplst, params, true, function(data, status) {
				if (status == 'success') {
					var jsonData = data.json;
					if (data == undefined) {//防止正式测试切换报错
						return;
					}
					var userprofile = data.userprofile;
					if (userprofile != null) {
						$('#usericon').attr('src', HeadPortraitIsNull(userprofile));
						$api.setStorage('cfnetppusericon', userprofile);
					}
				}
			});
		}
	}
	//判断头像是否为空
	function HeadPortraitIsNull(picurl) {
		var purl = "";
		if (picurl != '' && picurl != null) {
			if (picurl.indexOf("http") != -1) {//包含
				purl = picurl;
			} else {
				purl = $api.trimAll('http://cfnet.org.cn' + picurl);
			}
		} else {
			purl = "./image/default_user_icon.png";
		}
		return purl;
	}
	function prepareData(){
		$('#current_time').text(timeStringWithTimeStamp(getNowDate()));
		$('#course_name').text(api.pageParam.coursename);
		$('#course_info').show();
	}
	//设置消息通知
	function setupNotifi(){
		api.addEventListener({
		    name: 'ShareLanXueNotifi'
		}, function(ret, err) {
		    if (ret) {
		        var index = ret.value.index;
				setupScreenCapture(index);
		    } else {
		    	api.toast({
		    	    msg: '操作失败，请重试！'
		    	});
		    }
		});
	}
	//截屏
	function onScreenCapture(callback){
		api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '',
		    text: '生成图片中...',
		    modal: true
		});
		html2canvas(document.getElementById("share_img_div"), {
			useCORS: true,
		    logging: false
		}).then(function(canvas) {
            var dataUrl = canvas.toDataURL();
            saveBase64ImageToCache(dataUrl, function(status, imagePath){
            	if (callback != null) {
            		callback(status, imagePath);
            	}
            });
        });
	}
	//保存base64图片
	function saveBase64ImageToCache(base64String, callback){
		base64String = base64String.replace('data:image/png;base64,', '');
		var trans = api.require('trans');
		var imgPath = api.cacheDir + "/tempimg/";
		trans.saveImage({
		    base64Str: base64String,
		    // album: true,
		    imgPath: imgPath,
		    imgName: "shareTemp.png"
		}, function(ret, err) {
			api.hideProgress();
		    if (ret.status) {
		        screenCapturePath = imgPath + 'shareTemp.png';
		    }
		    if (callback != null) {
		    	callback(ret.status, screenCapturePath);
		    }
		});
	}
	//设置截图
	function setupScreenCapture(index){
		if (screenCapturePath != '') {
			setupShare(index);
		}else{
			onScreenCapture(function(status, imagePath){
				if (status) {
					setupShare(index);
				}else{
					api.toast({
					    msg: '截屏失败，请重试！'
					});
				}
			})
		}
	}
	//设置分享
	function setupShare(index){
		switch(index){
			case 0://微信
				shareWeChat('session');
				break;
			case 1://朋友圈
				shareWeChat('timeline');
				break;
			case 2://新浪微博
				shareSina();
				break;
			case 3://保存图片
				saveImage();
				break;
			default:
				break;
		}
	}
	//分享到微信
	function shareWeChat(type){
		var wx = api.require('wx');
		wx.shareImage({
		    apiKey: '',
		    scene: type,
		    thumb: '',
		    contentUrl: screenCapturePath
		}, function(ret, err) {
		    if (ret.status) {
		    	api.toast({
		    	    msg: '分享图片成功'
		    	});
		    	recordShareData();
		    }else{
		    	api.toast({
		    	    msg: '分享图片失败'
		    	});
		    }
		});
	}
	//分享到新浪微博
	function shareSina(){
		var weiboPlus= api.require('weiboPlus');
		weiboPlus.shareImage({
		    text: '分享我的打卡记录',
		    imageUrl: screenCapturePath
		}, function(ret, err) {
		    if (ret.status) {
		    	api.toast({
		    	    msg: '分享图片成功'
		    	});
		    	recordShareData();
		    }else{
		    	api.toast({
		    	    msg: '分享图片失败'
		    	});
		    }
		});
	}
	//保存图片
	function saveImage(){
		api.saveMediaToAlbum({
		    path: screenCapturePath
		}, function(ret, err) {
		    if (ret) {
		    	api.toast({
		    	    msg: '保存图片成功'
		    	});
		    }else{
		    	api.toast({
		    	    msg: '保存图片失败'
		    	});
		    }
		});
	}
	//设置背景图
	function setupBGImage(){
		var index = 1;
		var now = getNowDate();//获取当前时间戳
		var week01 = timeStamp13WithString("2019-05-13");//获取第二周开始时间
		var week02 = timeStamp13WithString("2019-05-20");
		var week03 = timeStamp13WithString("2019-05-27");
		var week04 = timeStamp13WithString("2019-06-03");
		var week05 = timeStamp13WithString("2019-06-10");
		var week06 = timeStamp13WithString("2019-06-17");
		var week07 = timeStamp13WithString("2019-06-24");
		var week08 = timeStamp13WithString("2019-07-01");
		if (now < week01) {//第一周
			index = 1;
		}else if(now >= week01 && now < week02){//第二周
			index = 2;
		}else if(now >= week02 && now < week03){//第三周
			index = 3;
		}else if(now >= week03 && now < week04){//第四周
			index = 4;
		}else if(now >= week04 && now < week05){//第五周
			index = 5;
		}else if(now >= week05 && now < week06){//第六周
			index = 6;
		}else if(now >= week06 && now < week07){//第七周
			index = 7;
		}else if(now >= week07){//第吧周
			index = 8;
		}
		var url = "../../image/lanxuejihua_0"+index+".png";
		$('#share_img_div').attr('style', 'background-image: url('+url+')');
	}
	//设置当前数据
	function setupCurrentData(){
		var params = {
			uid : $api.getStorage('cfnetppuid'),
			jid : $api.getStorage('cfnetppjxid'),
			pid : api.pageParam.planid
		};
		cfnetppPOST(url_getPunchClock, params, true, function(data, status) {
			if (status == 'success') {
				if (data.code == 200) {
					var jsonData = data.data;
					var count = jsonData.count;
					var proportion = parseFloat(jsonData.proportion);
					// proportion = proportion.toFixed(2);
					// var percentage = proportion * 100;
					var percentage = Math.round(proportion * 100);
					$('#count_num').text(count);
					$('#percentage_num').text(percentage+'%');
				}else{
					api.toast({
					    msg: '获取数据失败'
					});
				}
			}else{
				api.toast({
				    msg: '获取数据失败'
				});
			}
		});
	}
	//记录分享数据
	function recordShareData(){
		var params = {
			uid : $api.getStorage('cfnetppuid'),
			jid : $api.getStorage('cfnetppjxid'),
			pid : api.pageParam.planid,
			cid : api.pageParam.courseid
		};
		cfnetppPOST(url_recordShareData, params, true, function(data, status) {});
	}
</script>
</html>